<template>
    <div>
      <!-- 顶部导航 -->
      <div class="top-card">
        <div class="nav-container">
          <el-menu mode="horizontal" :router="true" background-color="#3c7fff" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item index="/front/home">酒店信息</el-menu-item>
            <el-menu-item index="/front/person">个人信息</el-menu-item>
            <el-menu-item index="/front/password">修改密码</el-menu-item>
            <el-menu-item index="/front/booking-records">预订记录</el-menu-item>
            <el-menu-item index="/front/my-reviews">我的评价</el-menu-item>
            <el-menu-item @click="logout">退出登录</el-menu-item>
          </el-menu>
          <div class="user-info">
            <span class="welcome-text">欢迎您，</span>
            <span class="username">{{ userInfo.username }}</span>
          </div>
        </div>
      </div>
      <!-- 主体内容 -->
      <div class="main-card">
        <router-view></router-view>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';

  const router = useRouter();
  const userInfo = ref({});

  // 获取用户信息
  onMounted(() => {
    const userStr = localStorage.getItem('xm-pro-user');
    if (userStr) {
      userInfo.value = JSON.parse(userStr);
    }
  });

  // 定义退出登录方法
  const logout = () => {
    localStorage.removeItem('xm-pro-user');
    router.push('/login');
  };
  </script>
  
  <style scoped>
  .top-card {
    height: 60px;
    background-color: #3c7fff;
  }

  .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 20px;
  }

  .user-info {
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
  }

  .welcome-text {
    margin-right: 5px;
  }

  .username {
    font-weight: bold;
  }

  .main-card {
    height: calc(100vh - 60px);
    padding: 20px;
  }

  :deep(.el-menu) {
    border-bottom: none;
    background-color: transparent !important;
  }

  :deep(.el-menu--horizontal) {
    flex: 1;
  }

  :deep(.el-menu--horizontal > .el-menu-item) {
    height: 60px;
    line-height: 60px;
    border-bottom: none;
  }

  :deep(.el-menu--horizontal > .el-menu-item.is-active) {
    border-bottom: 2px solid #ffd04b;
  }
  </style>